<template>
  <breadCrumb ref="breadCrumbRef" :item="item"></breadCrumb>

  <div class="table-wrapped">
    <!-- 顶部 -->
    <div class="table-top">
      <div class="table-header">
        <!-- 搜索框 -->
        <div class="search-wrapped">
          <el-input
            v-model="adminAccount"
            class="w-50 m-2"
            size="large"
            placeholder="输入账号进行搜索"
            :prefix-icon="Search"
          />
        </div>
        <div class="button-wrapped">
          <el-button type="primary" @click="openCreate(1)"
            >添加产品管理员</el-button
          >
        </div>
      </div>

      <!-- 表格内容 -->
      <div class="table-content">
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="index" width="50" />
          <el-table-column prop="account" label="账号" />
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="sex" label="性别" />
          <el-table-column prop="department" label="部门" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="update_time" label="更新时间">
            <template #default="{ row }">
              <div>{{ row.update_time?.slice(0, 10) }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <div>
                <el-button type="success" @click="openEdit(row.id)"
                  >编辑</el-button
                >
                <el-button type="danger" @click="openDelete(row.id)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 底部 -->
    <div class="table-footer">
      <el-pagination
        :page-size="10"
        :pager-count="11"
        layout="prev, pager, next"
        :total="100"
      />
    </div>
  </div>
  <create ref="Create"></create>
  <edit ref="Edit"></edit>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import breadCrumb from '@/components/bread_crumb.vue'
  import create from '../components/create_admin.vue'
  import edit from '../components/edit_admin.vue'
  import { bus } from '@/mitt/mitt'
  const item = ref({
    first: '产品列表',
  })
  const breadCrumbRef = ref(null)
  const input1 = ref('')
  const tableData = ref([])
  const Create = ref()
  const openCreate = (id: number) => {
    bus.emit('createId', id)
    Create.value.open()
  }
</script>

<style scoped>
  .table-wrapped {
    padding: 8px;
    height: calc(100vh -101px);
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .table-top {
      .table-header {
        padding: 0 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 48px;
        background: #fff;
      }
    }
  }
</style>
